<template>
  <div>
    <main>
      <div v-html="obj.description"></div>
      <div class="banner">
        <img :src="$pre+obj.img" alt="">
      </div>
      <div class="xiangqing">
        <div class="hang1">
          <p>
            <span>￥</span>
            <span>{{obj.price}}</span>
            <span>￥{{obj.market_price}}</span>
          </p>
          <div>
            <img src="../../../assets/img/商品详情 (2).png" alt="#" />
            <p>收藏</p>
          </div>
        </div>
        <div class="hang2"><h2>{{obj.goodsname}}</h2></div>
        <div class="hang3">敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔</div>
        <div class="hang4">11.11限时299元起</div>
        <div class="hang5">
          <p>此商品于2020-11-11,00点结束闪购特卖，品牌美妆闪购专场</p>
          <p>
            查看
            <img src="../../../assets/img/商品详情 (3).png" alt="#" />
          </p>
        </div>
      </div>
      <div class="wrap">
        <div class="hang1">
          <p>领券</p>
          <p>
            <img src="../../../assets/img/商品详情 (4).png" alt="#" />
            <img src="../../../assets/img/商品详情 (5).png" alt="#" />
            <img src="../../../assets/img/商品详情 (6).png" alt="#" />
          </p>
        </div>
        <div class="hang2">
          <p>分期</p>
          <p>
            <span>可选3/6/12期</span>
            <img src="../../../assets/img/商品详情 (7).png" alt="#" />
          </p>
        </div>
      </div>
    </main>
    <footer>
      <div class="box1">
        <div>
          <img src="../../../assets/img/商品详情 (8).png" alt="#" />
          <p>客服</p>
        </div>
        <div>
          <img src="../../../assets/img/商品详情 (8).png" alt="#" />
          <p>店铺</p>
        </div>
        <div>
          <img src="../../../assets/img/商品详情 (9).png" alt="#" />
          <p @click="toShop">购物车</p>
        </div>
      </div>
      <div class="box2" @click="addShop">加入购物车</div>
      <div class="box3">立即购买</div>
    </footer>
  </div>
</template>

<script>
import {reqDetail,reqAdd} from '../../../http/api';
import {Toast} from "vant"
export default {
    data(){
      return{
        obj:{}
      }
    },
    mounted(){
      reqDetail({id:this.$route.query.id}).then(res=>{
        this.obj=res.data.list[0]
      })
    },
    methods:{
      addShop(){
        reqAdd({
          uid:JSON.parse(localStorage.getItem("user")).uid,
          goodsid:this.$route.query.id,
          num:1,
          authorization:JSON.parse(localStorage.getItem("user")).token
        }).then(res=>{
          if(res.data.code==200){
            Toast(res.data.msg)
          }
        })
      },
      toShop(){
        this.$router.push("/index/shop")
      }
    }
};
</script>

<style scoped>
main .banner img {
  width: 7.5rem;
  height: 7.5rem;
  margin: auto;
}
main .xiangqing {
  background-color: white;
  padding: 0.2rem;
}
main .xiangqing .hang1 {
  display: flex;
  justify-content: space-between;
  margin: 0.2rem 0;
}
main .xiangqing .hang1 span:nth-of-type(1) {
  font-size: 0.2rem;
  color: #ff6040;
}
main .xiangqing .hang1 span:nth-of-type(2) {
  font-size: 0.46rem;
  color: #ff6040;
}
main .xiangqing .hang1 span:nth-of-type(3) {
  font-size: 0.2rem;
  color: gray;
  text-decoration: line-through;
}
main .xiangqing .hang1 img {
  width: 0.22rem;
  height: 0.21rem;
  margin: 0rem auto 0.05rem;
}
main .xiangqing .hang1 p {
  font-size: 0.2rem;
  color: #ff6040;
}
main .xiangqing .hang2 {
  font-size: 0.3rem;
  margin: 0.2rem 0;
}
main .xiangqing .hang3 {
  font-size: 0.26rem;
  color: gray;
  margin: 0.2rem 0;
}
main .xiangqing .hang4 {
  margin: 0.2rem 0;
  width: 1.66rem;
  height: 0.32rem;
  background-color: #ff6040;
  color: white;
  font-size: 0.2rem;
  text-align: center;
  line-height: 0.32rem;
}
main .xiangqing .hang5 {
  margin: 0.2rem 0;
  background-color: #f2f2f2;
  display: flex;
  justify-content: space-between;
  padding: 0.12rem;
}
main .xiangqing .hang5 p:nth-of-type(1) {
  font-size: 0.2rem;
  color: gray;
}
main .xiangqing .hang5 p:nth-of-type(2) {
  display: flex;
  font-size: 0.2rem;
  color: #ff6040;
}
main .xiangqing .hang5 p:nth-of-type(2) img {
  width: 0.16rem;
  height: 0.19rem;
}
main .wrap {
  padding: 0 0 0 0.2rem;
}
main .wrap .hang1 {
  padding-top: 0.2rem;
  display: flex;
}
main .wrap .hang1 p:nth-of-type(1) {
  font-size: 0.24rem;
  font-weight: bolder;
  margin-right: 0.4rem;
  line-height: 0.32rem;
}
main .wrap .hang1 p:nth-of-type(2) {
  border-bottom: 1px solid gainsboro;
  display: flex;
  width: 6.4rem;
}
main .wrap .hang1 p:nth-of-type(2) img {
  margin-right: 0.2rem;
  margin-bottom: 0.2rem;
}
main .wrap .hang1 p:nth-of-type(2) img:nth-of-type(1) {
  width: 0.78rem;
  height: 0.32rem;
}
main .wrap .hang1 p:nth-of-type(2) img:nth-of-type(2) {
  width: 0.66rem;
  height: 0.32rem;
}
main .wrap .hang1 p:nth-of-type(2) img:nth-of-type(3) {
  width: 0.64rem;
  height: 0.32rem;
}
main .wrap .hang2 {
  padding-top: 0.2rem;
  display: flex;
}
main .wrap .hang2 p:nth-of-type(1) {
  font-size: 0.24rem;
  font-weight: bolder;
  margin-right: 0.4rem;
  line-height: 0.32rem;
}
main .wrap .hang2 p:nth-of-type(2) {
  width: 6.24rem;
  font-size: 0.24rem;
  line-height: 0.32rem;
  display: flex;
  justify-content: space-between;
  color: gray;
}
main .wrap .hang2 p:nth-of-type(2) img {
  width: 0.08rem;
  height: 0.18rem;
  margin-top: 0.1rem;
}
footer {
  border-top: 1px solid gray;
  display: flex;
  height: 0.98rem;
}
footer .box1 {
  display: flex;
  flex-grow: 3;
  font-size: 0.2rem;
  text-align: center;
  justify-content: space-evenly;
  align-items: center;
}
footer .box1 img {
  width: 0.4rem;
  height: 0.4rem;
  margin: 0 auto 0.1rem;
}
footer .box2 {
  flex-grow: 2;
  background-color: #ffcc66;
  color: #663014;
  line-height: 0.98rem;
  font-size: 0.03rem;
  font-weight: bolder;
  text-align: center;
}
footer .box3 {
  flex-grow: 2;
  background-color: #ff6040;
  color: white;
  line-height: 0.98rem;
  font-size: 0.03rem;
  font-weight: bolder;
  text-align: center;
}
</style>